<template>
    <div id="selectMembersPage">
        <el-row>
            <el-col :span="4" :offset="17">
                <div class="selectRow">
                    <el-input v-model="memberTel" placeholder="请输入手机号" size="medium"></el-input>
                </div>
            </el-col>
            <el-col :span="3" class="paddingLeft">
                <div class="selectRow">
                    <el-button type="primary" icon="el-icon-search" @click="selectMemberByTel" size="medium">查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24" class="selectRow">
                <el-table :data="memberInfo" border :header-cell-style="this.$store.state.headerCssObj" :cell-style="this.$store.state.cellCssObj" style="width: 100%">
                    <el-table-column prop="userId" label="会员ID"></el-table-column>
                    <el-table-column prop="number" label="联系电话"></el-table-column>
                    <el-table-column prop="money" label="余额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="addMoney(scope.$index, scope.row)">充值</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!--以下是充值弹窗-->
        <el-dialog title="会员充值" :visible.sync="dialogFormVisible" width="500px" center :close-on-click-modal = 'false'>
            <el-form :rules='moneyNumRules' :model="addMoneyNum" ref="addMoneyNum">
                <el-form-item label="会员手机号" :label-width="formLabelWidth">
                    <el-input v-model="addMoneyTel" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="充值金额" :label-width="formLabelWidth" prop="num">
                    <el-input v-model="addMoneyNum.num" autocomplete="off" placeholder="请输入充值金额"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="medium">取消</el-button>
                <el-button type="primary" @click="toAddMoney('addMoneyNum')" size="medium">充值</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "selectMembersPage",
        data(){
            //金额输入验证
            let YZ_addMoneyNum = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入充值金额'));
                } else {
                    if (!(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value))) {
                        callback(new Error('金额输入错误'));
                    }else {
                        callback();
                    }
                }
            };
            return{
                memberTel:'',   //输入框输入的会员手机号
                addMoneyTel:'',   //实际充值的会员手机号
                memberData:'',    //查询到的会员信息
                formLabelWidth:'100px',    //弹出框中label占的宽度
                dialogFormVisible:false,     //弹出框的状态
                addMoneyNum:{num:''},   //充值的金额
                moneyNumRules: {     //金额输入验证
                    num: [{ validator: YZ_addMoneyNum, trigger: 'blur' }]
                }
            }
        },
        computed:{
            memberInfo(){
                if (this.memberData!==''){
                    return [this.memberData]
                }else {
                    return [];
                }
            }
        },
        methods:{
            ...mapActions(['selectMember','addMemberMoney']),
            selectMemberByTel(){   //点击查询按钮
                if(this.memberTel===''){  //如果没有输入查询的会员手机号
                    this.$message({
                        type: 'warning',
                        message: '请输入会员手机号'
                    });
                }else {
                    //查询操作
                    this.selectMember({number:this.memberTel}).then(res=>{
                        if (res.code===200){
                            //将数据存到this.memberData
                            this.memberData={userId:res.userId,number:res.number,money:res.money};
                        }else{    //查询失败通知内容
                            this.$message({
                                type: 'error',
                                message: '该号码未注册'
                            });
                        }
                    })
                }
            },
            addMoney(index,row){   //点击表格中充值按钮
                this.dialogFormVisible=true;
                this.addMoneyTel=row.number;   //保存实际充值的手机号
            },
            toAddMoney(formName){   //确认充值
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        this.$confirm('确认充值?', '提示', {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            type: 'info'
                        }).then(() => {      //确认充值
                            //充值操作
                            this.addMemberMoney({number:this.addMoneyTel,money:parseFloat(this.addMoneyNum.num)}).then(res=>{
                                if (res.code===200){
                                    this.dialogFormVisible=false;   //关闭弹窗
                                    this.$message({
                                        type: 'success',
                                        message: '充值成功!'    //通知内容
                                    });
                                    // console.log(res);
                                    //再次查询，刷新列表
                                    this.selectMember({number:this.addMoneyTel}).then(res=>{
                                        if (res.code===200){
                                            //将数据存到this.memberData
                                            this.memberData={userId:res.userId,number:res.number,money:res.money};
                                        }else{    //查询失败通知内容
                                            this.$message({
                                                type: 'error',
                                                message: '查询失败'
                                            });
                                        }
                                    })
                                }else {
                                    this.$message({
                                        type: 'error',
                                        message: '充值失败!'    //通知内容
                                    });
                                }
                            });
                        })
                    }
                });
            },
        }
    }
</script>

<style scoped lang="less">
    .selectRow{
        padding-top: 20px;
    }
    .paddingLeft{
        padding-left: 3.5%;
    }
</style>